import "./index.less";
import React, { useState, useEffect } from "react";
import { View } from "@tarojs/components";
import { Cell, Tabs, Button, Checkbox, Image } from "@nutui/nutui-react-taro";

import { hideTabBar, pxTransform } from "@tarojs/taro";

const sleep = (time) => new Promise((resolve) => setTimeout(resolve, time));

const InfiniteUlStyle = {
  height: pxTransform(520),
  width: "100%",
  padding: "0",
  overflowY: "auto",
  overflowX: "hidden",
};

const InfiniteLiStyle = {
  marginTop: "10px",
  fontSize: "14px",
  color: "rgba(100, 100, 100, 1)",
  textAlign: "center",
};

function TabBox({ drinkers }) {
  const [tabvalue, setTabvalue] = useState("0"); // 默认选中第一个标签页（"0"）

  return (
    <Cell className="tabWrap">
      <Tabs
        value={tabvalue}
        style={{ width: "100%" }}
        onChange={(value) => {
          setTabvalue(value);
        }}
      >
        <Tabs.TabPane title="全部照片" style={{ width: "50%" }}>
          <View>
            <View className="tabItem">
              <View className="tab_tlt">
                <View>04月24日 星期五</View>
                <Button color="#DCE3FF" style={{ color: "#5374FF" }}>
                  取消
                </Button>
              </View>
              <View style={InfiniteUlStyle}>
                <ImgList></ImgList>
              </View>
            </View>
          </View>
        </Tabs.TabPane>
        <Tabs.TabPane title="我的收藏">我的收藏</Tabs.TabPane>
      </Tabs>
    </Cell>
  );
}

// {defaultList.map((item, index) => (
//   <li style={InfiniteLiStyle} key={index}>
//     {item}
//   </li>
// ))}

function TabBot() {
  return (
    <View className="saveBtn">
      <Button color="#FF6696" className="btn_sty">
        删除
      </Button>
      <Button color="#5374FF" className="btn_sty">
        全选
      </Button>
    </View>
  );
}

function ImgList() {
  const [checkedValues, setCheckedValues] = useState(["1"]);
  const [optionsDemo1] = useState([
    {
      label: "选项 1",
      value: "1",
    },
    {
      label: "选项 2",
      value: "2",
    },
    {
      label: "选项 3",
      value: "3",
    },
    {
      label: "选项 1",
      value: "4",
    },
    {
      label: "选项 2",
      value: "5",
    },
    {
      label: "选项 3",
      value: "6",
    },
    {
      label: "选项 1",
      value: "7",
    },
    {
      label: "选项 2",
      value: "8",
    },
    {
      label: "选项 3",
      value: "9",
    },
    {
      label: "选项 1",
      value: "10",
    },
    {
      label: "选项 2",
      value: "11",
    },
    {
      label: "选项 3",
      value: "12",
    },
  ]);

  const handleChange = (values) => {
    setCheckedValues(values);
  };

  return (
    <Checkbox.Group
      value={checkedValues}
      onChange={handleChange}
      className="imgWrap"
    >
      {optionsDemo1.map((option) => (
        <Checkbox
          key={option.value}
          value={option.value}
          disabled={option.disabled}
          iconSize="20"
          className="imgItem"
        >
          <View className="imgItem_label">
            <Image
              src={require("@/assets/book.png")}
              alt={option.label}
              style={{ width: "100%", height: "100%", borderRadius: "8px" }}
            />

            {/* 默认图标将自动显示在这里，但我们想要右下角显示 */}
            <View
              className="checkboxIcon"
              style={{
                position: "absolute",
                bottom: "10px",
                right: "16px",
              }}
            />
          </View>
        </Checkbox>
      ))}
    </Checkbox.Group>
  );
}

function Record() {
  return (
    <View className="cameraRecod">
      <TabBox></TabBox>
      <TabBot></TabBot>
    </View>
  );
}

export default Record;
